<template>
	<view>
		<up-navbar leftIconColor="#FFFFFF" leftIconSize="44rpx" title="订单管理" :autoBack="true" placeholder
			bgColor="transparent">
		</up-navbar>
		<view class="intergral-tabs">
			<up-tabs :activeStyle='tabs.activeSyle' :inactiveStyle='tabs.inactiveStyle' :itemStyle='tabs.itemStyle'
				:list="tabsList" :lineWidth='tabs.lineWidth' :lineHeight='tabs.lineHeight' @change="typeChange"></up-tabs>
		</view>
		<view class="orders-main">
			<up-empty v-if="response.list.length === 0" textColor='#fff' iconColor="#fff" mode="list"
				icon="http://cdn.uviewui.com/uview/empty/list.png">
			</up-empty>
			<view class="orders-main-item" v-for="item in response.list" :key="item.id">
				<view class="orders-main-item-header flex align-item_center justify-content_space-between">
					<view v-if="item.gameNo">游戏ID：{{item.gameNo}}</view>
					<view v-else @click="selectGameNo(item.id)"><up-button text="选择游戏账号" size='mini'></up-button></view>
					<view>{{showStatus(item.status)}}</view>
				</view>
				<view class="line"></view>
				<view class="product" v-for="(product,productIndex) in item.itemList" :key="product.id">
					<omitProductVue :item="product" />
				</view>
			</view>
		</view>
		<up-back-top :scrollTop="scrollTop" :iconStyle="iconStyle" :duration="200" :bottom="160"></up-back-top>
		<up-gap height="110rpx"></up-gap>
	</view>
</template>

<script setup>
	import omitProductVue from '../components/omitProduct.vue';
	import secondApi from "@/api/biz/second.js"
	import {
		ref,
		reactive
	} from "vue"
	import {
		onPageScroll,
		onLoad,
		onReachBottom
	} from "@dcloudio/uni-app"
	import {
		tabs
	} from '@/common';
	import {
		msg
	} from '@/utils/tool';
	const tabsList = reactive([{
			name: '待发货',
			id: 10,
		},
		{
			name: '部分发货',
			id: 15,
		},
		{
			name: '已完成',
			id: 20
		}
	]);

	const showStatus = (status) => {
		return tabsList.find(tab => tab.id === status)?.name
	}

	const typeChange = (e) => {
		queryParams.status = e.id
		queryParams.pageNo = 1;
		getList()
	}

	const orderInfo = reactive({
		id: "",
		gameNo: ''
	})

	const selectGameNo = (id) => {
		orderInfo.id = id;
		uni.navigateTo({
			url: "/pointProduct/account/index?type=2"
		})
	}

	const scrollTop = ref(0);
	const iconStyle = {
		fontSize: '32rpx',
		color: '#2979ff'
	};

	onPageScroll((e) => {
		scrollTop.value = e.scrollTop;
	})

	const queryParams = reactive({
		pageNo: 1,
		pageSize: 30,
		status: 10
	})
	const response = reactive({
		list: [],
		total: 0
	})
	const getList = () => {
		secondApi.getOrderPage(queryParams).then(res => {
			response.list = res.data.list;
			response.total = res.data.total
		})
	}

	onReachBottom(() => {
		if (response.list.length >= response.total) return;
		queryParams.pageNo++;
		getList()
	})

	const bindGameNo = () => {
		secondApi.updateGameNo(orderInfo).then(res => {
			if (res.code === 0) {
				msg("绑定成功");
				response.list.some(item => {
					if (item.id === orderInfo.id) {
						item.gameNo = orderInfo.gameNo
						return;
					}
				})
			}
		})
	}

	onLoad(() => {
		getList()

		uni.$on('selectGameNo', val => {
			orderInfo.gameNo = val;
			bindGameNo()
		})
	})
</script>
<style>
	page {
		background: #1B1829;
	}
</style>
<style scoped lang="scss">
	.orders-main {
		&-item {
			margin: 20rpx auto 0;
			width: 690rpx;
			background: #25223B;
			border-radius: 16rpx;

			.product {
				padding: 28rpx 22rpx;
			}

			&-header {
				padding: 30rpx 30rpx 20rpx;

				view:first-child {
					font-weight: 500;
					font-size: 30rpx;
					color: #FFFFFF;
				}

				view:last-child {
					font-weight: 500;
					font-size: 30rpx;
					color: #4E96E9;
				}
			}
		}
	}
</style>